<template>
  <div>
    <a-button type="primary" style="margin-top: 20px" @click="editModal(0)">新建</a-button>
    <div style="margin-top: 20px">
      <a-table :pagination="false" :columns="columns" :data-source="data" rowKey="id">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="nid" slot-scope="nid">
      <a-tag color="blue">
        {{ nid }}
      </a-tag>
    </span>
        <span slot="domainName" slot-scope="domainName">
        {{ domainName || '无' }}
      </span>
        <span slot="state" slot-scope="state">
      <a-tag :color="state === -1? 'red' : 'cyan'">
        {{ state === -1 ? '禁用' : '使用中' }}
      </a-tag>
    </span>
        <span slot="action" slot-scope="text, record">
      <a-button type="primary" icon="edit" size="small" @click="editModal(record)"></a-button>
      <a-divider type="vertical" />
      <a-dropdown>
    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
      更多 <a-icon type="down" />
    </a>
    <a-menu slot="overlay">
      <a-menu-item>
        <a href="javascript:;">禁用</a>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
    </span>
      </a-table>
      <div style="margin-top: 20px;text-align: center">
        <a-pagination v-model="current" :page-size="pageSize" :total="total" @change="changePage" />
      </div>
    </div>
    <div>
      <a-modal
        title="操作"
        style="top: 20px;"
        :width="800"
        v-model="visible"
        @ok="handleOk"
      >
        <a-form class="permission-form" :form="form">

          <a-form-item>
            <a-input v-if="mdl.id > 0" v-decorator="['id', { initialValue: mdl.id } ]" hidden />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="唯一识别码"
            hasFeedback
          >
            <a-input
              placeholder="唯一识别码"
              v-decorator="['nid', {initialValue: mdl.nid}, {rules: [{ required: true, message: '请输入唯一识别码' }]}]"
            />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="参数名称"
            hasFeedback
          >
            <a-input
              placeholder="起一个名字"
              v-decorator="['name', {initialValue: mdl.name}, {rules: [{ required: true, message: '请输入参数名称' }]}]"
            />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="域名"
            hasFeedback
          >
            <a-input
              placeholder="www.xxxx.com"
              v-decorator="['domainName', {initialValue: mdl.domainName}]"
            />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="参数值"
            hasFeedback
          >
            <a-textarea
              :rows="5"
              placeholder="..."
              id="value"
              v-decorator="['value', {initialValue: mdl.value}, {rules: [{ required: true, message: '请输入参数值' }]}]"
            />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="类型"
            hasFeedback
          >
            <a-select v-decorator="['type', { initialValue: mdl.type }]">
              <a-select-option :value="1">系统参数</a-select-option>
              <a-select-option :value="2">域名参数</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="状态"
            hasFeedback
          >
            <a-select v-decorator="['state', { initialValue: mdl.state}]">
              <a-select-option :value="1">正常</a-select-option>
              <a-select-option :value="-1">禁用</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="描述"
            hasFeedback
          >
            <a-textarea
              :rows="5"
              placeholder="..."
              id="remark"
              v-decorator="['remark', {initialValue: mdl.remark}]"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>

</template>
<script>
  import { getSystemConfigList, saveUpdateConfig } from '../../api/sysConfig'
  import {saveUpdateMenu} from "../../api/system";
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '标识',
      dataIndex: 'nid',
      key: 'nid',
      scopedSlots: { customRender: 'nid' },
    },
    {
      title: 'value值',
      key: 'value',
      dataIndex: 'value',
    },
    {
      title: '域名',
      key: 'domainName',
      dataIndex: 'domainName',
      scopedSlots: { customRender: 'domainName' },
    },
    {
      title: '状态',
      key: 'state',
      dataIndex: 'state',
      scopedSlots: { customRender: 'state' },
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' },
    },
  ];
  export default {
    name:'configList',
    data() {
      return {
        visible: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 }
        },
        mdl: {
          state: 1,
          type: 1
        },
        form: '',
        data: [],
        columns,
        current: 1,
        pageSize: 1,
        total: 0
      };
    },
    mounted() {
      this.getConfigPageData()
    },
    methods: {
      changePage() {
        this.data = []
        this.getConfigPageData()
      },
      async getConfigPageData() {
        let params = {
          pageNo: this.current,
          pageSize: this.pageSize
        }
        const result = await getSystemConfigList(params)
        const pageInfo = result.data.page
        this.data = pageInfo.list
        this.total = pageInfo.totalPage
      },
      editModal(record) {
        this.mdl = Object.assign({}, (record === 0 ? this.mdl : record))
        this.form = this.$form.createForm(this)
        this.visible = true
      },
      handleOk() {
        this.form.validateFields(async (err, values) => {
          const result = await saveUpdateConfig(values)
          if (result.code > 0) {
            this.$ms('保存成功')
            this.form = this.$form.createForm(this)
            this.visible = false
            this.getConfigPageData()
          } else {
            this.$me(result.message)
          }
        })
      }
    }
  };
</script>
